<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="shortcut icon" href="../favicon.ico">
    <link href="../css/bootstrap.min14ed.css" rel="stylesheet">
    <link href="../css/style.min862f.css" rel="stylesheet">
    <link href="../css/common.css" rel="stylesheet">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ePOIA9rln4os58j2HQnx3AW0Sdy9MiQv"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
    <title>分屏省市地图</title>
    <style type="text/css">
		ul,li{list-style: none;margin:0;padding:0;float:left;}
		html{height:100%}
		body{height:100%;margin:0px;padding:0px;font-family:"微软雅黑";}
		#container{height:100%;width:100%;}
        .echarts-box{margin-bottom:0}
        .BMap_cpyCtrl,.anchorBL{display: none}
    </style>	
</head>
<body class="gray-bg echarts">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="echarts-box">
                <div class="echarts-title">
                <div class="echarts-2-b">
                    <div class="echarts-title-content">省市信息</div>
                </div>
                </div>
                <div class="echarts-box-content carAllInfo">
                    <div class="carAllInfo-content">
                        <div id="container"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
	
</body>
<script src="../js/mars2baidu.js"></script>
<script src="../js/ApiRequest.js"></script>
<script type="text/javascript">
    resize()
    var map = new BMap.Map("container");          // 创建地图实例
    map.setMapStyle({style:'midnight'});
    var point = new BMap.Point(116.418261, 39.921984);
    map.centerAndZoom(point, 15);             // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(); // 允许滚轮缩放
  
    var storageData = [];//接收到的arry
    var myIcon = new BMap.Icon("../img/ico/car.png", new BMap.Size(35,17));
    var opts = {
	  width : 200,     // 信息窗口宽度
	  height: 100,     // 信息窗口高度
	  title : "汽车具体位置" , // 信息窗口标题
	  enableMessage:true,//设置允许信息窗发送短息
	}   
    if (document.createElement('canvas').getContext) {  // 判断当前浏览器是否支持绘制海量点
        showPoint()
    } else {
        alert('请在chrome、safari、IE8+以上浏览器查看本示例');
    }
    function openInfo(content,e){//开启窗口
		var infoWindow = new BMap.InfoWindow("lng:"+content.lng+"lat:"+content.lat,opts);  // 创建信息窗口对象 
		map.openInfoWindow(infoWindow,content); //开启信息窗口
	}
    function addMarker(point){//描点
	  var marker = new BMap.Marker(point,{icon:myIcon});
      map.addOverlay(marker);
    //   marker.addEventListener("click",function(e){
    //     openInfo(point,e)
    //   });
    }
    // 行政区域
    function getBoundary(city){       
		var bdary = new BMap.Boundary();
		bdary.get(city, function(rs){       //获取行政区域
			map.clearOverlays();        //清除地图覆盖物       
			var count = rs.boundaries.length; //行政区域的点有多少个
			if (count === 0) {
				alert('未能获取当前输入行政区域');
				return ;
			}
          	var pointArray = [];
			for (var i = 0; i < count; i++) {
				var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#58ffff",strokeOpacity:0.5,fillColor:"#3d9dff",fillOpacity:0.2}); //建立多边形覆盖物
				map.addOverlay(ply);  //添加覆盖物
				pointArray = pointArray.concat(ply.getPath());
			}    
			map.setViewport(pointArray);    //调整视野  
		});   
	}
    // 格式化接收到的postmessage数据
    function showPoint(){
        var points = storageData.allPoint;
        var city = storageData.name;
        if(!city || !points) return;  

        getBoundary(city)

        setTimeout(function(){
            for (var i = 0; i < points.length; i++) {
                var bdpoint = coordtransform.wgs84togbd09(points[i][0], points[i][1])
                var pp = new BMap.Point(bdpoint[0],bdpoint[1]);
                addMarker(pp);
            }

        },300)
    }
    // 重置UI大小
    function resize(){
        var winHeight = window.innerHeight||(document.documentElement && document.documentElement.clientHeight)||document.body.clientHeight;
        container.style.height = winHeight-78 + 'px';
    }
    window.onresize = function () {//重置容器高宽
        resize();
    };
    window.onload = function(){//接收来自index.html的数据（其实是大屏的地区数据）
        window.addEventListener("storage", function (e) {
            if(e.key == "map"){
                storageData = storageLocal.get('map');
                showPoint()
            }
        });
    }
</script>
</html>
